<template>
   <div class="sexBox">
      <div class="title">
         <p>男女比例</p>
         <img src="../../images/dataScreen-title.png" alt="">
      </div>
      <div class="middle">
         <div class="man">
            <span>男士</span>
            <img src="../../images/man.png" alt="">
         </div>
         <div class="women">
            <span>女士</span>
            <img src="../../images/woman.png" alt="">
         </div>

      </div>
      <div class="rate">
         <p>男士58%</p>
         <p>女士42%</p>
      </div>
      <!-- 图表展示区 -->
      <div class="charts" ref="charts"></div>
   </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
let charts = ref()
onMounted(() => {
   // 初始化echarts实例
   let mycharts = echarts.init(charts.value)
   // 设置配置项
   mycharts.setOption({
      xAxis: {
         show: false,
         min: 0,
         max: 100
      },
      yAxis: {
         show: false,
         type: 'category'
      },
      series: [
         {
            type: 'bar',
            data: [58],
            barWidth: 20,
            z: 3,
            itemStyle: {
               color: 'skyblue',
               borderRadius: 20
            }
         },
         {
            type: 'bar',
            data: [100],
            barWidth: 20,
            //调整女士柱条位置
            barGap: '-100%',
            itemStyle: {
               color: 'pink',
               borderRadius: 20
            }
         }
      ],
      // title: {
      //    text: '男女比例'
      // },
      grid: {
         left: 0,
         right: 0,
         top: 0,
         bottom: 0
      },
      tooltip: {
         show: true
      }
   })
})
</script>

<style lang="scss" scoped>
.sexBox {
   background: url(../../images/dataScreen-main-lc.png) no-repeat;
   background-size: cover;

   .title {
      p {
         color: white;
         font-size: 20px;
      }
   }

   .middle {
      display: flex;
      justify-content: space-around;
      margin-top: 60px;

      .man {
         width: 111px;
         height: 115px;
         background: url(../../images/man-bg.png) no-repeat;
         background-size: cover;
         display: flex;
         flex-direction: column;
         align-items: center;

         span {
            color: white;
         }

         img {
            margin-top: 20px;
         }
      }

      .women {
         width: 111px;
         height: 115px;
         background: url(../../images/man-bg.png) no-repeat;
         background-size: cover;
         display: flex;
         flex-direction: column;
         align-items: center;

         span {
            color: white;
         }

         img {
            margin-top: 20px;
         }

      }
   }

   .rate {
      display: flex;
      color: white;
      justify-content: space-between;
      margin: 20px 60px 0;
   }

   .charts {
      height: 100px;
      margin: 0 60px;
   }
}
</style>